<template>
	<view class="content">
		<mvBar :mysNavConfig="mysNavConfig" @onLeftClick="onLeftClick"></mvBar>
		<view class="itme-box">
			<u-sticky>
				<u-row justify="space-between" gutter="10">
					<u-col span="6">
						<u-button text="查看趋势" type="warning" @click="showTrend()"></u-button>
					</u-col>
					<u-col span="6">
						<u-button text="采集数据" type="primary" @click="gotoCollect()"></u-button>
					</u-col>
				</u-row>
			</u-sticky>
			<u-toast ref="uToast"></u-toast>
			<view
				:class="['h-table',item.healthStatus=='2' ? 'h-table-warning' : item.healthStatus==3? 'h-table-danger' : 'h-table-success']"
				v-for="(item,index) in collectedRecordList" :key="item.collectRecordRealId">
				<u-swipe-action>
					<u-swipe-action-item :options="options" @click="click(item)">
						<view class="h-tr h-tr-2">
							<view class="h-td h-td-colspan h-td-rowspan">
								<view class="h-tr h-tr-1 h-thead">
									<view class="h-td">{{item.collectedTime}} - {{item.description}}</view>
								</view>
								<view class="h-tr h-tr-2"
									v-for="(eigenDataItem,index) in item.channelDatas[0].eigenDatas"
									:key="item.eigenDataRealId">
									<view class="h-td">{{eigenDataItem.pointFeatureName}}</view>
									<view class="h-td">{{eigenDataItem.value}}</view>
								</view>
								<view class="h-tr h-tr-1" @click="listen(item.channelDatas[0].soundUrl)">
									<view class="h-td listenText">试听<u-icon name="volume" color="#2979ff" size="28">
										</u-icon>
									</view>
								</view>
							</view>
						</view>
					</u-swipe-action-item>
				</u-swipe-action>
			</view>
			<u-loadmore :status="loadStatus" :loading-text="loadingText" :loadmore-text="loadmoreText"
				:nomore-text="nomoreText" bgColor="#f2f2f2"></u-loadmore>
		</view>
	</view>
</template>


<script>
	const innerAudioContext = uni.createInnerAudioContext();
	innerAudioContext.autoplay = true;
	export default {
		data() {
			return {
				options: [{
					text: '删除',
					icon: 'trash-fill',
					iconSize: '20',
					style: {
						backgroundColor: '#f56c6c'
					}
				}],
				mysNavConfig: {
					/* 占位开启  */
					navPadding: true,
					/* 背景 */
					bgColor: "#0055ff",
					/* 标题 （屏幕中心居中 两边图标中心居中使用slot center1） */
					navTitle: {
						text: "记录列表",
						color: "#ffffff",
						fontSize: "20px", // px upx rpx
						fontWeight: "500", // 100 - 700
					},
					isCustomFn: true,
					btnType: "type2",
					type2Config: {
						// 左图标
						leftPath: "/static/img/back.png",
						// 右图标
						rightPath: "/static/img/home.png",
						// 圆角
						radius: "40rpx",
					}
				},
				userInfo: '',
				equipmentRealId: '',
				pointRealId: '',
				collectedRecordList: [],
				loadStatus: 'loadmore',
				pageIndex: 1,
				pageSize: 8,
				count: 8,
				loadingText: '加载中...',
				loadmoreText: '上拉加载更多',
				nomoreText: '无数据'
			}
		},
		onLoad(option) {
			uni.setNavigationBarTitle({
				title: '采集数据'
			});
			this.userInfo = uni.getStorageSync('userInfo');
			this.equipmentRealId = option.equipmentRealId;
			this.pointRealId = option.pointRealId;
			this.getRecordList();
		},
		methods: {
			onReachBottom() {
				this.loadStatus = "loadmore";
				if (this.count < this.pageSize) {
					this.loadStatus = "nomore";
				} else {
					setTimeout(() => {
						this.pageSize += 8;
						this.getRecordList();
						this.loadStatus = "loading";
					}, 1000);
				}
			},
			getRecordList() {
				uni.request({
					url: getApp().globalData.serverAddress + this.$uri.Uri_getRecordListForPoint.replace(
							'{userRealId}', this.userInfo.userRealId)
						.replace('{equipmentRealId}', this.equipmentRealId)
						.replace('{pointRealId}', this.pointRealId),
					data: {
						page: this.pageIndex,
						limit: this.pageSize
					},
					dataType: "json",
					method: "GET",
					success: (res) => {
						this.count = res.data.count
						this.collectedRecordList = res.data.data
						if (this.count < this.pageSize) {
							this.loadStatus = "nomore";
						}
					}
				})
			},
			gotoCollect() {
				uni.redirectTo({
					url: '/pages/records/collectData?pointRealId=' + this.pointRealId + "&equipmentRealId=" + this
						.equipmentRealId
				})
			},
			showTrend() {
				uni.navigateTo({
					url: '/pages/records/trendChart?pointRealId=' + this.pointRealId + "&equipmentRealId=" + this
						.equipmentRealId
				})
			},
			listen(value) {
				innerAudioContext.src = getApp().globalData.serverAddress + value;
				innerAudioContext.play();
				this.$utils.showToast(this, '正在播放录音', 'success', 1, '');
			},
			onLeftClick() {
				uni.navigateBack({
					delta: 1
				});
			},
			//删除
			click(value) {
				uni.showModal({
					title: '温馨提示',
					content: '删除记录以后不可恢复，是否确认删除？',
					success: res => {
						if (res.confirm) {
							uni.request({
								url: getApp().globalData.serverAddress + this.$uri.Url_deleterecord
									.replace("{userRealId}",
										this.userInfo.userRealId).replace("{equipmentRealId}",
										value.equipmentRealId).replace("{pointRealId}",
										value.pointRealId).replace("{collectRecordRealId}",
										value.collectRecordRealId),
								dataType: "json",
								method: "POST",
								success: (resData) => {
									uni.showToast({
										title: '删除成功',
										icon: 'success',
										duration: 1000
									});
									this.getRecordList();
								},
								fail: (resData) => {
									uni.showToast({
										title: 'resData.data.msg',
										icon: 'error',
										duration: 2000
									});
								}
							})
						}
					}
				})
			}
		},
		onPullDownRefresh() {
			this.pageSize = 8;
			this.getRecordList();
			uni.stopPullDownRefresh();
		}
	}
</script>

<style lang="scss">
	/* 引入表格样式表 */
	@import "../../common/helang-table.scss";


	/* 示例样式开始 */
	.content {
		font-size: 28rpx;
		background-color: #f3f3f3;

		.red {
			background-color: #DD524D;
			color: #fff;
			text-align: center;
		}

		.green {
			background-color: #42b983;
			color: #fff;
			text-align: center;
		}

		.blue {
			background-color: #007AFF;
			color: #fff;
			text-align: center;
		}

		.yellow {
			background-color: #ffaa00;
			color: #fff;
			text-align: center;
		}

		.listenText {
			color: #007AFF;
			font-size: 16px;
		}

		.itme-box {
			padding: 20rpx;
			background-color: #fff;
			margin-bottom: 20rpx;

			.title {
				padding-bottom: 20rpx;
				margin-bottom: 20rpx;
				border-bottom: #e5e5e5 solid 1px;
				line-height: normal;
			}

			.width-fill {
				width: 100%;
			}

			.preview-box {
				height: 400rpx;
				box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
			}
		}
	}

	/* 示例样式结束 */
</style>
